<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪类和伪元素</title>
        <style type="text/css">

            .fourth {
                position: relative ; /* 作为父元素采用相对定位是为了让子元素相对于自己进行定位*/
                border: 1px solid red ; width: 80% ; margin: 100px 0 ;
            }

            /* 选择 .fourth 内部的所有直接子元素中 标签名称为 span 的元素 */
            .fourth>span { display: inline-block ;  border: 1px solid blue ; margin: 10px ;  vertical-align: top ; }

            /* 当鼠标悬浮到 .fourth 元素时 就在 .fourth 元素内部的所有子元素之前(before)插入一个"元素" */
            .fourth:hover::before {
                content: '云销雨霁，彩彻区明' ;
                display: block ; /* 以块元素形式存在 */
                width: 100% ; /* 使用绝对定位后一定要指定宽度 */
                height: 50px ;
                line-height: 50px ;
                text-align: center ;
                background-color: #FFFF00;
                position: absolute ;
                top : -51px ;
                left : 0 ;
            }

            /* 当鼠标悬浮到 .fourth 元素时 就在 .fourth 元素内部的所有子元素之后(after)插入一个"元素" */
            .fourth:hover::after {
                content: '渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦' ;
                display: block ; /* 以块元素形式存在 */
                width: 100% ; /* 使用绝对定位后一定要指定宽度 */
                height: 50px ;
                line-height: 50px ;
                text-align: center ;
                background-color: #ff740f;
                position: absolute ;
                bottom : -51px ;
                left : 0 ;
            }

            /* 作为父元素采用相对定位是为了让子元素相对于自己进行定位 */
            .fifth {  position: relative ;  border: 1px solid red ; width: 80% ; margin: 100px 0 ; }

            /* 选择 .fifth 内部的所有直接子元素中 标签名称为 span 的元素 */
            .fifth>span { display: inline-block ;  border: 1px solid blue ; margin: 10px ;  vertical-align: top ; }
            /* 选择 .fifth 内部的所有直接子元素中 标签名称为 div 的元素 */
            .fifth>div {  border: 1px solid blue ; margin: 10px ; }

            /* 生成的伪元素是 .fifth 的子元素 */
            .fifth::before {
                content: '云销雨霁，彩彻区明' ; /* 指定伪元素中的文本内容 */
                display: block ; /* 让伪元素以块元素形式显示在页面上 */
                width: 100% ; /* 使用绝对定位后一定要指定宽度 */
                height: 30px ;
                line-height: 30px ;
                text-align: center ;
                background: #FFFF00 ;
                position: absolute;
                top : -31px ;
                left : 0 ;
            }

            /* 不能书写 .fifth::before:hover 来设置 伪元素在鼠标悬浮时的样式 */
            /* 但是可以通过 父元素 来设置 伪元素的样式，比如 .fifth:hover::before */
            .fifth:hover::before {  background: #dedede ; }

            .fifth::after {
                content: '渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦' ; /* 指定伪元素中的文本内容 */
                display: block ; /* 让伪元素以块元素形式显示在页面上 */
                width: 100% ; /* 使用绝对定位后一定要指定宽度 */
                height: 30px ;
                line-height: 30px ;
                text-align: center ;
                background: #ff740f ;
                position: absolute;
                bottm : -31px ;
                left : 0 ;
            }

        </style>
    </head>
    <body>

        <h3>伪类(pseudo-classes)和伪元素(pseudo-elements)</h3>

        <div class="fourth">
            <span>落霞与孤鹜齐飞</span>
            <span>秋水共长天一色</span>
        </div>

        <div class="fifth">
            <span>落霞与孤鹜齐飞</span>
            <div>秋水共长天一色</div>
        </div>
        
    </body>
</html>